<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建项目 - AI Worker</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 30px 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2em;
        }

        .btn-back {
            background: rgba(255,255,255,0.2);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-back:hover {
            background: rgba(255,255,255,0.3);
        }

        .main-content {
            background: white;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            max-width: 900px;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 1em;
        }

        .required {
            color: #dc3545;
        }

        .form-group input[type="text"],
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .help-text {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }

        .radio-group {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }

        .radio-option {
            flex: 1;
            padding: 15px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .radio-option:hover {
            border-color: #667eea;
            background: #f8f9fa;
        }

        .radio-option input[type="radio"]:checked + label {
            color: #667eea;
            font-weight: 600;
        }

        .radio-option.selected {
            border-color: #667eea;
            background: #e7f1ff;
        }

        .doc-input {
            display: none;
        }

        .doc-input.active {
            display: block;
        }

        .btn-group {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            flex: 1;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .message {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
        }

        .message.show {
            display: block;
        }

        .message.error {
            background: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }

        .message.success {
            background: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 创建新项目</h1>
            <button class="btn-back" onclick="goBack()">← 返回</button>
        </div>

        <div class="main-content">
            <div id="messageBox" class="message"></div>

            <form id="createForm" onsubmit="handleSubmit(event)">
                <div class="form-group">
                    <label for="projectName">
                        项目名称 <span class="required">*</span>
                    </label>
                    <input 
                        type="text" 
                        id="projectName" 
                        name="projectName"
                        placeholder="请输入项目名称，例如：v5.9-资产管理"
                        required
                    >
                </div>

                <div class="form-group">
                    <label for="projectDescription">
                        项目描述
                    </label>
                    <textarea 
                        id="projectDescription" 
                        name="projectDescription"
                        placeholder="简要描述项目的功能和目的（可选）"
                    ></textarea>
                </div>

                <div class="form-group">
                    <label>需求文档类型 <span class="required">*</span></label>
                    <div class="radio-group">
                        <label class="radio-option" id="urlOption" onclick="selectDocType('url')">
                            <input type="radio" name="docType" value="url" checked>
                            <label>📄 飞书文档链接</label>
                        </label>
                        <label class="radio-option" id="fileOption" onclick="selectDocType('file')">
                            <input type="radio" name="docType" value="file">
                            <label>📁 上传Word文档</label>
                        </label>
                    </div>
                </div>

                <div class="form-group doc-input active" id="urlInput">
                    <label for="docUrl">
                        飞书文档链接 <span class="required">*</span>
                    </label>
                    <input 
                        type="text" 
                        id="docUrl" 
                        placeholder="请输入飞书文档的完整URL"
                    >
                    <div class="help-text">请确保文档设置为公开访问或已配置应用权限</div>
                </div>

                <div class="form-group doc-input" id="fileInput">
                    <label for="docFile">
                        上传Word文档 <span class="required">*</span>
                    </label>
                    <input 
                        type="file" 
                        id="docFile" 
                        accept=".doc,.docx"
                    >
                    <div class="help-text">支持.doc和.docx格式，文件大小不超过16MB</div>
                </div>

                <div class="btn-group">
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        ✨ 创建项目
                    </button>
                    <button type="button" class="btn btn-secondary" onclick="goBack()">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 默认选中URL选项
        document.getElementById('urlOption').classList.add('selected');

        // 选择文档类型
        function selectDocType(type) {
            // 更新选中状态
            document.getElementById('urlOption').classList.remove('selected');
            document.getElementById('fileOption').classList.remove('selected');
            
            if (type === 'url') {
                document.getElementById('urlOption').classList.add('selected');
                document.getElementById('urlInput').classList.add('active');
                document.getElementById('fileInput').classList.remove('active');
                document.querySelector('input[name="docType"][value="url"]').checked = true;
            } else {
                document.getElementById('fileOption').classList.add('selected');
                document.getElementById('urlInput').classList.remove('active');
                document.getElementById('fileInput').classList.add('active');
                document.querySelector('input[name="docType"][value="file"]').checked = true;
            }
        }

        // 提交表单
        async function handleSubmit(event) {
            event.preventDefault();
            
            const name = document.getElementById('projectName').value.trim();
            const description = document.getElementById('projectDescription').value.trim();
            const docType = document.querySelector('input[name="docType"]:checked').value;
            const docUrl = document.getElementById('docUrl').value.trim();
            const docFile = document.getElementById('docFile').files[0];
            
            // 验证
            if (!name) {
                showMessage('请输入项目名称', 'error');
                return;
            }
            
            if (docType === 'url' && !docUrl) {
                showMessage('请输入飞书文档链接', 'error');
                return;
            }
            
            if (docType === 'file' && !docFile) {
                showMessage('请上传Word文档', 'error');
                return;
            }
            
            // 禁用提交按钮
            const submitBtn = document.getElementById('submitBtn');
            const originalText = submitBtn.textContent;
            submitBtn.disabled = true;
            submitBtn.textContent = '创建中...';
            
            try {
                let documentSource = docUrl;
                
                // 如果是文件，先上传
                if (docType === 'file') {
                    const formData = new FormData();
                    formData.append('file', docFile);
                    
                    const uploadRes = await fetch('/api/upload', {
                        method: 'POST',
                        body: formData
                    });
                    
                    const uploadData = await uploadRes.json();
                    if (!uploadData.success) throw new Error('文件上传失败');
                    documentSource = uploadData.file_path;
                }
                
                // 创建项目
                const response = await fetch('/api/projects', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        name: name,
                        description: description,
                        document_type: docType,
                        document_source: documentSource
                    })
                });
                
                const result = await response.json();
                
                if (!response.ok || !result.success) {
                    throw new Error(result.error || '创建失败');
                }
                
                showMessage('项目创建成功！', 'success');
                
                // 1秒后跳转到项目详情页
                setTimeout(() => {
                    window.location.href = `/project/${result.project_id}`;
                }, 1000);
                
            } catch (error) {
                showMessage('创建失败: ' + error.message, 'error');
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            }
        }

        // 显示消息
        function showMessage(message, type) {
            const messageBox = document.getElementById('messageBox');
            messageBox.textContent = message;
            messageBox.className = `message ${type} show`;
            
            if (type === 'success') {
                setTimeout(() => {
                    messageBox.classList.remove('show');
                }, 3000);
            }
        }

        // 返回
        function goBack() {
            window.location.href = '/';
        }
    </script>
</body>
</html>
